<!DOCTYPE html>
<html>
<head>
    <!--Import Google Icon Font-->
    <link type="text/css" rel="stylesheet" href="css/material-icons.css"/>
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
    <title>Cell Detail</title>

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>
<body>

<div class="container">
  <div class="section">
    <div class="row">
      <div class="col m6 push-m2" id="main-panel">
        <div class="row">
          <table class="striped">
            <tbody id="detail">
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <div class="divider"></div>
  <div class="section">
      <div class="row">
          <div class="col m2">
              <a class="waves-effect waves-light blue-grey lighten-2 btn" onclick="window.history.back()" id="back-caption"><i
                      class="material-icons left">chevron_left</i></a>
          </div>
      </div>
  </div>
</div>

<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/nano.js"></script>
<script>
N.ValidateSession();
var texts = N.GetTexts();
$('#back-caption').append(texts.get(N.TagBack));
M.AutoInit();

var poolName;
var cellName;

function parseQueryString(){
  var url = window.location.search;
  var queryParams = new Map();
  var queryString = url.substring( url.indexOf('?') + 1 );
  if (0 === queryString.length){
    return queryParams;
  }
  var values = queryString.split("&");
  values.forEach((value) => {
    var p = value.split('=');
    queryParams.set(p[0], p[1]);
  });
  return queryParams;
}

function loadCellInfo(){
  $.getJSON(
    "/compute_pool_cells/" + poolName + "/" + cellName,
    function(result){
      if (0 != result['error_code']) {
          M.toast({html: 'get compute cell info fail:' + result['message']});
          return;
      }
      $('#pool-name').val(poolName);
      var info = result['data'];
      var container = $('#detail');
      container.append(
        $('<tr>').append(
          $('<td>').append(
            $('<b>').text(texts.get(N.TagName))
          )
        ).append(
          $('<td>').text(info['name'])
        ).append(
          $('<td>')
        )
      ).append(
        $('<tr>').append(
          $('<td>').append(
            $('<b>').text(texts.get(N.TagAddress))
          )
        ).append(
          $('<td>').text(info['address'])
        ).append(
          $('<td>')
        )
      );
      var aliveICON;
      if (info['alive']){
        aliveICON = $('<i>').addClass('material-icons green-text darken-2 tooltipped').attr('data-position', 'top').
          attr('data-tooltip', texts.get(N.TagOnline)).text('wifi');
      }else{
        aliveICON = $('<i>').addClass('material-icons blue-grey-text tooltipped').attr('data-position', 'top').
          attr('data-tooltip', texts.get(N.TagOffline)).text('signal_wifi_off');
      }
      var enableICON;
      if (info['enabled']){
        enableICON = $('<i>').addClass('material-icons green-text darken-2 tooltipped').attr('data-position', 'top').
          attr('data-tooltip', texts.get(N.TagEnable)).text('check');
      }else{
        enableICON = $('<i>').addClass('material-icons red-text darken-4 tooltipped').attr('data-position', 'top').
          attr('data-tooltip', texts.get(N.TagDisable)).text('do_not_disturb');
      }

      container.append(
        $('<tr>').append(
          $('<td>').append(
            $('<b>').text(texts.get(N.TagEnable))
          )
        ).append(
          $('<td>').append(enableICON)
        ).append(
          $('<td>')
        )
      ).append(
        $('<tr>').append(
          $('<td>').append(
            $('<b>').text(texts.get(N.TagAlive))
          )
        ).append(
          $('<td>').append(aliveICON)
        ).append(
          $('<td>')
        )
      )
      if (info['alive']&&info['enabled']){
        var storages = info['storage'];
        if(storages){
          storages.forEach((storage)=>{
            if (storage['attached']){
              container.append(
                $('<tr>').append(
                  $('<td>').append(
                    $('<b>').text("Storage:" + storage['name'])
                  )
                ).append(
                  $('<td>').append(
                    $('<i>').addClass('material-icons green-text darken-2 tooltipped').attr('data-position', 'top').
                      attr('data-tooltip',texts.get(N.TagAttached)).text('power')
                    )
                ).append(
                  $('<td>')
                )
              )
            }else{
              container.append(
                $('<tr>').append(
                  $('<td>').append(
                    $('<b>').text("Storage:" + storage['name'])
                  )
                ).append(
                  $('<td>').append(
                    $('<i>').addClass('material-icons red-text darken-4 tooltipped').attr('data-position', 'top').
                      attr('data-tooltip', texts.get(N.TagDisable)).text('priority_high')
                    )
                ).append(
                  $('<td>').text(storage['error'])
                )
              )
            }
          });
        }
      }

      M.Tooltip.init($('.tooltipped'));
    });
}

$(function(){
  var params = parseQueryString();
  if (!params.has('pool')){
    M.toast({html: 'must specify pool name'})
    return;
  }
  if (!params.has('cell')){
    M.toast({html: 'must specify cell name'})
    return;
  }
  poolName = params.get('pool');
  cellName = params.get('cell');
  loadCellInfo();
});


</script>
</body>
</html>
